<!--
 * @Descripttion: 分析页
 * @version: 0.0.1
 * @Author: zhu_liangyu
 * @Date: 2020-10-13 15:31:02
 * @LastEditors: zhu_liangyu
 * @LastEditTime: 2020-11-13 11:32:16
-->
<template>
  <a-row type="flex" justify="space-around" :gutter="16">
    <a-col class="wish-design-dashboard-analysis-chartCard mb16" :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
      <ChartCard
        :title="t('dashboard.analysis.totalSales')"
        total="¥ 126,560"
        :loading="analysisChartCardLoadding"
        :footerData="[{ label: t('dashboard.analysis.dailySales'), value: '12,423' }]"
      >
        <template #content>
          <div style="width: 98%,height:98%">
            <TinyAreaChart v-bind="config"></TinyAreaChart>
          </div>
        </template>
      </ChartCard>
    </a-col>
    <a-col class="mb16" :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
      <ChartCard
        :title="t('dashboard.analysis.visits')"
        total="8,688"
        :loading="analysisChartCardLoadding"
        :footerData="[{ label: t('dashboard.analysis.dailyVisits'), value: '1,688' }]"
      >
        <template #content>
          <TinyColumnChart v-bind="config"></TinyColumnChart>
        </template>
      </ChartCard>
    </a-col>
    <a-col class="mb16" :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
      <ChartCard
        :title="t('dashboard.analysis.numberOfUsers')"
        total="888"
        :loading="analysisChartCardLoadding"
        :footerData="[{ label: t('dashboard.analysis.dailyNewUsers'), value: '88' }]"
      >
        <template #content>
          <TinyLineChart v-bind="config"></TinyLineChart>
        </template>
      </ChartCard>
    </a-col>
    <a-col class="wish-design-dashboard-analysis-chartCard mb16" :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
      <ChartCard
        :title="t('dashboard.analysis.numberOfOrders')"
        total="868"
        :loading="analysisChartCardLoadding"
        :footerData="[{ label: t('dashboard.analysis.dailyOrders'), value: '68' }]"
      >
        <template #content>
          <a-tooltip :title="t('dashboard.analysis.dailyOrderCompletionRate') + ' 80%'">
            <a-progress :percent="80" size="small" status="active" />
          </a-tooltip>
        </template>
      </ChartCard>
    </a-col>
  </a-row>
</template>

<script lang="ts">
import { SearchOutlined } from '@ant-design/icons-vue'
import ChartCard from './ChartCard.vue'
import { onMounted, ref } from 'vue'
import { TinyAreaChart, TinyAreaChartProps, TinyColumnChart, TinyLineChart } from '@opd/g2plot-vue'
import { useI18n } from 'vue-i18n'

export default {
  name: 'AnalysisHeaderChart',
  components: {
    SearchOutlined,
    ChartCard,
    TinyAreaChart,
    TinyColumnChart,
    TinyLineChart,
  },
  setup() {
    const { t } = useI18n()
    const analysisChartCardLoadding = ref(true)
    const visitsData = new Array(30).fill(0).map(() => Math.random() * 100)
    onMounted(() => {
      setTimeout(() => (analysisChartCardLoadding.value = false), 1000)
    })
    const config = {
      width: '100%',
      height: 46,
      color: '#1890ff',
      data: visitsData,
    }
    return {
      t,
      analysisChartCardLoadding,
      config,
      visitsData,
    }
  },
}
</script>